<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<link href='../../layuiadmin/style/page/fullcalendar-2.0.1/fullcalendar.css' rel='stylesheet' />
<link href='../../layuiadmin/style/page/fullcalendar-2.0.1/fullcalendar.print.css' rel='stylesheet' media='print' />

<script src="../../layuiadmin/layui/layui.js"></script>  
<script src='../../layuiadmin/style/page/fullcalendar-2.0.1/lib/moment.min.js'></script>
<script src='../../layuiadmin/style/page/fullcalendar-2.0.1/lib/jquery.min.js'></script>
<script src='../../layuiadmin/style/page/fullcalendar-2.0.1/lib/jquery-ui.custom.min.js'></script>
<script src='../../layuiadmin/style/page/fullcalendar-2.0.1/fullcalendar.min.js'></script>
<script>

	$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			defaultDate: '2014-06-12',
			selectable: true,
			selectHelper: true,
			select: function(start, end) {
				var title = prompt('Event Title:');
				var eventData;
				if (title) {
					eventData = {
						title: title,
						start: start,
						end: end
					};
					$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
				}
				$('#calendar').fullCalendar('unselect');
			},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: '2014-06-01'
				},
				{
					title: 'Long Event',
					start: '2014-06-07',
					end: '2014-06-10'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-06-09T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-06-16T16:00:00'
				},
				{
					title: 'Meeting',
					start: '2014-06-12T10:30:00',
					end: '2014-06-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2014-06-12T12:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2014-06-13T07:00:00'
				},
				{
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2014-06-28'
				}
			]
		});
		
	});

</script>
<style>
	#calendar {
		width: 100%;
		margin: 20px auto;
	}
</style>
</head>
<body>

	<div class="layui-fluid" style="margin-top: 15px;">
	  <div class="layui-card">
	    <div class="layui-card-header">考勤统计</div>
	    <div class="layui-card-body" style="padding: 15px;">
	    	  <div class="layui-row" style="margin-top: 10px;">
	    	    <div class="layui-col-sm3">
	    	      <div class="grid-demo grid-demo-bg1" style="text-align: center;">
	    			 <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>		
	    	      </div>
	    	    </div>
	    	    <div class="layui-col-sm3">
	    	      <div class="grid-demo" style="text-align: center;">
	    			 <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
	    	      </div>
	    	    </div>
	    	    <div class="layui-col-sm3">
	    	      <div class="grid-demo grid-demo-bg1" style="text-align: center;">
	    	      	<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
	    	      </div>
	    	    </div>
	    	    <div class="layui-col-sm3">
	    	      <div class="grid-demo" style="text-align: center;">
	    			<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
	    	      </div>
	    	    </div>
	    	  </div>

		      <div id='calendar'></div>
	    </div>
	  </div>
	</div>
	
	  


	

</body>
</html>
